<template>
  <div class="chat-config-wrap">
    <el-icon class="close-icon cur-pointer" @click="handleEventClose">
      <ele-Close/>
    </el-icon>
    <el-tabs tab-position="left" v-model="activeName">
      <el-tab-pane name="account" label="账号设置">
        <div class="option-wrap">
          <div class="g-header">账号设置</div>
          <div class="config-item">
            <div class="item-wrap">
              <span class="label">账号名称</span>
              <el-input v-model="accountForm.nickname" style="width: 260px;"/>
            </div>
            <div class="item-wrap">
              <span class="label">账号头像</span>
              <el-input v-model="accountForm.nickname" style="width: 260px;"/>
            </div>
            <div class="item-wrap">
              <span class="label">账号UID</span>
              <span>9843758043860983y8936704587</span>
            </div>
            <div class="item-wrap">
              <span class="label">性别</span>
              <el-radio-group v-model="accountForm.gender">
                <el-radio :value="0">女</el-radio>
                <el-radio :value="1">男</el-radio>
                <el-radio :value="2">保密</el-radio>
              </el-radio-group>
            </div>
            <div class="item-wrap">
              <span class="label">个性签名</span>
              <el-input v-model="accountForm.nickname"
                        style="width: 260px;"
                        :rows="4"
                        type="textarea"/>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="notice" label="消息通知">
        <div class="option-wrap">
          <div class="g-header">消息通知</div>
          <div class="config-item">
            <div class="item-wrap">
              <span class="label">账号名称</span>
              <el-input v-model="accountForm.nickname" style="width: 260px;"/>
            </div>
            <div class="item-wrap">
              <span class="label">账号头像</span>
              <el-input v-model="accountForm.nickname" style="width: 260px;"/>
            </div>
            <div class="item-wrap">
              <span class="label">账号UID</span>
              <span>9843758043860983y8936704587</span>
            </div>
            <div class="item-wrap">
              <span class="label">性别</span>
              <el-radio-group v-model="accountForm.gender">
                <el-radio :value="0">女</el-radio>
                <el-radio :value="1">男</el-radio>
                <el-radio :value="2">保密</el-radio>
              </el-radio-group>
            </div>
            <div class="item-wrap">
              <span class="label">个性签名</span>
              <el-input v-model="accountForm.nickname"
                        style="width: 260px;"
                        :rows="4"
                        type="textarea"/>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="common" label="通用设置">
        <div class="option-wrap">
          通用设置
        </div>
      </el-tab-pane>
      <el-tab-pane name="document" label="文件管理">
        <div class="option-wrap">
          文件管理
        </div>
      </el-tab-pane>
      <el-tab-pane name="plugin" label="插件管理">
        <div class="option-wrap">
          插件管理
        </div>
      </el-tab-pane>
      <el-tab-pane name="about" label="关于JIM">
        <div class="option-wrap">
          关于JIM
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue';

export default defineComponent({
  name: 'ChatConfig',
  props: {
    groupId: {
      type: String,
      default: () => '',
    },
  },
  setup(props, {emit}) {
    const state = reactive({
      activeName: 'account',
      accountForm: {
        nickname: '',
        uid: '',
        gender: ''
      }
    });
    const handleEventClose = () => {
      emit('handleClose', {})
    };
    return {
      ...toRefs(state),
      handleEventClose
    };
  },
});
</script>


<style scoped lang="scss">
.chat-config-wrap {
  position: absolute;
  width: calc(100% - 80px);
  left: 80px;
  height: calc(100% - 60px);
  background-color: #EFEFEF;
  z-index: 2005;
  border-radius: 0 0 var(--im-frame-border-radis) 0;
  padding: 40px 20px;

  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .option-wrap {
    padding-left: 20px;

    .g-header {
      font-weight: bold;
    }

    .config-item {
      padding-top: 30px;

      .item-wrap {
        padding: 6px 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .label {
          width: 100px;
          color: grey;
        }
      }
    }
  }

}
</style>
